<!-- vue 3 引入百度api -->
<template>
  <div id="allmap"></div>
</template>

<script setup>
import { onMounted, reactive, toRefs, onUnmounted } from 'vue'

const state = reactive({
  map: null,
  marker: null,
  point: null,
  locations: [
    { name: '皖农监-宿州市埇桥区农业科学示范基地', id: '1', lat: 33.7129, lng: 117.06339 },
    { name: '标记2', id: '2', lat: 39.2304, lng: 121.4737 },
    { name: '标记3', id: '3', lat: 22.5455, lng: 114.0651 }
  ],
  markers: [],
  map: '',
  handleClickId: '',
  handleClickName: ''
})

const { locations, map, markers, handleClickId, handleClickName } = toRefs(state)

onMounted(() => {
  loadMapScript() // 加载百度地图资源
})

// eslint-disable-next-line vue/valid-define-emits
const emit = defineEmits()
// 初始化地图
const init = () => {
  let Bmap = window.BMap // 注意要带window，不然会报错（注意官方api,会有改动，之前是Bmap,后面3.0版本改为了BMap,最好查文档或者打印一下window）
  map.value = new Bmap.Map('allmap') // allmap必须和dom上的id一直
  map.value.centerAndZoom(new Bmap.Point(108.97978, 34.25715), 6) // 初始化地图,设置中心点坐标和地图级别
  map.value.setCurrentCity('西安')
  map.value.enableScrollWheelZoom(true)
  map.value.setMapStyleV2({
    styleId: 'd5cbf21584a00a0bf5047480ff03348d'
  })
  locations.value.forEach((element) => {
    const point = new Bmap.Point(element.lng, element.lat)
    const marker = new Bmap.Marker(point) // 创建标注

    console.log(marker, 'marker')
    const label = new Bmap.Label(element.name, { offset: new Bmap.Size(20, 0) }) // 创建文本标注
    // const icon = new BMap.Icon(MiconHover, new BMap.Size(60, 119)) //鼠标移入改变标注点图标
    label.setStyle({
      display: 'none',
      color: '#000',
      fontSize: '16px',
      fontFamily: '微软雅黑',
      border: 'none',
      background: 'none'
    })
    // marker.setIcon(icon)
    marker.setLabel(label) // 设置文本标注在标记上显示
    //鼠标移入显示窗口
    marker.addEventListener('mouseover', (e, i) => {
      label.setStyle({ display: 'block' })
    })
    //鼠标移出隐藏窗口
    marker.addEventListener('mouseout', (e) => {
      label.setStyle({ display: 'none' })
    })
    //点击事件
    marker.addEventListener('click', (e) => {
      const { lng, lat } = e.target.point
      // 获取id //页面跳转
      const { id, name } = locations.value.find((item) => {
        return item.lng == lng && item.lat == lat
      })
      handleClickId.value = id

      emit('updateDialogVisible', true)
      emit('update:handleClickId', handleClickId)
      emit('update:handleClickName', name)

      // router.push(to.fullPath)
    })
    map.value.addOverlay(marker) // 将标注添加到地图中
    markers.value.push(marker) // 将标记添加到引用数组中，便于后续操作
  })
}
const loadMapScript = () => {
  // 此处在所需页面引入资源就是，不用再public/index.html中引入
  var script = document.createElement('script')
  script.type = 'text/javascript'
  script.className = 'loadmap' // 给script一个类名
  script.src = 'https://api.map.baidu.com/getscript?v=3.0&ak=tgLfnf9RhDkJi3Wg3TbZCFk2mUyaOcR8'
  // 此处需要注意：申请ak时，一定要应用类别一定要选浏览器端，不能选服务端，不然地图会报ak无效
  script.onload = () => {
    // 使用script.onload，待资源加载完成，再初始化地图
    init()
  }
  let loadmap = document.getElementsByClassName('loadmap')
  if (loadmap) {
    // 每次append script之前判断一下，避免重复添加script资源标签
    for (var i = 0; i < loadmap.length; i++) {
      document.body.removeChild(loadmap[i])
    }
  }

  document.body.appendChild(script)
}

onUnmounted(() => {
  map.value = null // 销毁地图实例
})
</script>
<style lang="scss" scoped>
#allmap {
  // 注意给dom宽高，不然地图不出来
  width: 100%;
  height: 100%;
}
</style>
